<template>
	<view>
		<view>
			<view class="head_bg">
				<image src="../../../static/images/home_bg@2x.png"></image>
			</view>
			<view class="headBtn"  @tap="enterassembleMine()"></view>
		</view>
		
		<view class="swiper_Rotation">
			<uni-swiper-dot class="swiper_item">
				<swiper class="swiper-box">
					<swiper-item  class='swiperItem1'>
						<view  class="swiper-item">
							<image class="swiper_img" src='../../../static/banner.png' mode="aspectFill" /> 
						</view>
					</swiper-item>
					<swiper-item class='swiperItem2'>
						<view  class="swiper-item">
							<image class="swiper_img" src='../../../static/banner.png' mode="aspectFill" /> 
						</view>
					</swiper-item>
					<swiper-item class='swiperItem3'>
						<view  class="swiper-item">
							<image class="swiper_img" src='../../../static/banner.png' mode="aspectFill" />
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		
		<!-- 列表 -->
		<view class='list_commodity'>
			<view class='title_area'>
				<view class='title_con'>附近商家</view>
				<view class='title_more'></view>
			</view>
			<view class="uni-list">
				 <mescroll-uni :down="downOption" @down="downCallback" @up="upCallback">
					<view class="uni-list-cell"  hover-class="uni-list-cell-hover"  v-for="(item,index) in dataList"  :key='index' :id='item.id' @tap="enterStore($event)">
						
						<view class="uni-media-list">
							<image class="uni-media-list-logo" :src="item.logo.thumb_url_big"></image>
							<view class="uni-media-list-body">
								<view class="uni-media-list-text-title">{{item.name}}</view>
								<view class="uni-media-list-text-center">
									<text>月销:</text>
									<text>1920</text>
									<text class='text_distance'>1.5km</text>
								</view>
								<view class="uni-media-list-text-center">
									<text>地址:</text>
									<text>{{item.province+item.city+item.district+item.address}}</text>
								</view>
							</view>
						</view>
					</view>
				</mescroll-uni> 
				
			</view>
		</view>
		
		
		
		
		
	</view>
</template>

<script>
	
	import md5 from '../../../common/md5.js'
	import http from '../../../common/http.js'
	import common from '../../../common/common.js'
	import config from '../../../common/config.js'
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import uniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue'
	
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	export default {
		components: {
			uniSwiperDot,
			uniIcons,
			uniNavBar,
			uniStatusBar,
			MescrollUni,
			banner: {},
			listData: [],
			last_id: "",
			reload: false,
		},
		data() {
			return {
				 titleColor:"#fff",
				 // 下拉刷新的常用配置
				 downOption: { 
				 	use: true, // 是否启用下拉刷新; 默认true
				 	auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				 },
				 // 上拉加载的常用配置
				 upOption: {
				 	use: true, // 是否启用上拉加载; 默认true
				 	auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				 	page: {
				 		num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
				 		size: 20 // 每页数据的数量,默认10
				 	},
				 	noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				 	empty: {
				 		tip: '暂无相关数据'
				 	}
				 },
				 // 列表数据
				 dataList: [],
				 curPageLength:0,
			}
		},
		onLoad() {
			this.statusBarHeight=10;
		},
		onPullDownRefresh() {
		 
		},
		onReachBottom() {
		 
		},
		methods: {
			enterassembleMine(){
				uni.navigateTo({
					url:'../assembleMine/assembleMine'
				})
			},
			/*下拉刷新的回调 */
				downCallback(mescroll) {
					//联网加载数据
					this.getListDataFromNet(0, 1, (data) => {
						//联网成功的回调,隐藏下拉刷新的状态
						mescroll.endSuccess();
						//设置列表数据
						this.dataList.unshift(data[0]);
					}, () => {
						//联网失败的回调,隐藏下拉刷新的状态
						mescroll.endErr();
					})
				},
				/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
				upCallback(mescroll) {
					//联网加载数据
					this.getListDataFromNet(mescroll.num, mescroll.size, (curPageData)=>{
									mescroll.endSuccess(curPageData.length);
						//设置列表数据
						this.dataList=this.dataList.concat(curPageData);
					}, () => {
						//联网失败的回调,隐藏下拉刷新的状态
						mescroll.endErr();
					})
				},
			  async getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
				  var that=this;
					 try {
						if (pageNum == 0) {
							//此处模拟下拉刷新返回的数据
							let params = {
									appid:common.appid,
									api_version:common.apiversion,
									timestamp:common.timestamp,
									token:uni.getStorageSync("userToken"),
									page:1,
									page_size:20,
								};
							let signStr = common.sign(params);
							params.sign = signStr;
							await uni.request({
							    url:config.assembleUrl+'group/shop/list', //仅为示例，并非真实接口地址。
								method:"POST",
							    header:{
							        'content-type':'application/x-www-form-urlencoded',
							    },
								data: params,
							    success: function (res) {
									that.dataList = res.data.data.list;
									console.log(res.data.data.list);
							    }
							});
							
						} else {
							//此处模拟上拉加载返回的数据
							let params = {
									appid:common.appid,
									api_version:common.apiversion,
									timestamp:common.timestamp,
									token:uni.getStorageSync("userToken"),
									page:pageNum,
									page_size:20,
								};
							   let signStr = common.sign(params);
							   params.sign = signStr;
							await uni.request({
							    url:config.assembleUrl+'group/shop/list', //仅为示例，并非真实接口地址。
								method:"POST",
							    header:{
							        'content-type':'application/x-www-form-urlencoded',
							    },
								data: params,
							    success: function (res) {
									that.dataList =res.data.data.list;
									console.log(res.data.data.list);
									if(pageNum == 1)
									that.dataList = []; //如果是第一页需手动置空列表
									that.dataList = that.dataList.concat(res.data.data.list);
							    }
							});
							
						} 
						
							//联网成功的回调
							successCallback && successCallback(this.dataList);
						} catch (e) {
							//联网失败的回调
							errorCallback && errorCallback();
						}
									
				},
			enterStore(e){
				let listId =e.currentTarget.id;
				uni.navigateTo({
					url:'../store/storeInform?listId='+listId+''
				})
			}
		},
		
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			setTimeout(function() {
				uni.stopPullDownRefresh()
				console.log('stopPullDownRefresh')
			}, 1000)
		},
		
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4
	}
   
	view {
		font-size: 28upx;
		line-height: inherit
	}
	.uni-status-bar {
		display: block;
		width: 100%;
		height: 20px;
		height: var(--status-bar-height);
	}
	.uni-navbar__content {
		display: block;
		position: relative;
		width: 100%;
		background-color:rgba(255,255,255,0);
		overflow: hidden
	}
    .head_bg{
    	width: 100%;
    	height: 384rpx; 
    	 }
    .head_bg image{
    	width: 100%;
    	height: 384rpx;
    	 }
	.example-body{
		position: fixed;
		width: 100%;
		top:0upx;
		left:0upx;
		z-index:9999;
		padding:0rpx 0rpx;
	}
	.title_area{
		width:100%;
		height:auto;
		float:left;
		margin-top:10px;
		font-weight: 600;
		font-size:1.1em;
		color:#222;
	}
	.title_con{
		width:auto;
		height:24px;
		line-height:24px;
		display:block;
		float:left;
		margin-left:3%;
	}
	.title_more{
		width:24px;
		height:24px;
		line-height:24px;
		display:block;
		float:right;
		margin-right:3%;
		background:url(../../../static/images/more@2x.png)no-repeat;
		background-size:100% 100%;
	}
	.swiper_Rotation{
		width:94%;
		height:150px;
		position:absolute;
		left:3%;
		top:90px;
		border-radius:5px;
	}
	.swiperItem1,
	.swiperItem2,
	.swiperItem3{
		width:100%;
		height:100%;
		border-radius:5px;
	}
	.scoll-wrapper{
			display:flex;
			align-items: flex-start;
		}
	.swiper_img{
		width:100%;
		height:120px;
		border-radius:5px;
	}
	
	.list_commodity{
		width:94%;
		height:auto;
		float:left;
		margin-top:10px;
		margin-left:3%;
		background:#fff;
		border-radius:5px;
	}
	.floor-item{
		width:30%;
		float:left;
		margin-left:2.3%;
		margin-top:0px;
		height:160px;
	}
	.RC_item_img{
		width:96%;
		height:80px;
		float:left;
		margin-top:5px;
		margin-left:3%;
		border-radius:5px;
		border:solid 2px #eb6c37;
	}
	.RC_item_title{
		width:96%;
		height:30px;
		line-height:30px;
		float:left;
		margin-left:3%;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		font-size:0.9em;
	}
	.RC_item_price{
		width:96%;
		height:20px;
		line-height:20px;
		float:left;
		margin-left:3%;
		color:#ff4000;
	}
	.price_fh{
		font-size:0.9rpx;
	}
	.price_dw{
		font-size:0.9rpx;
	}
	.price_jg{
		font-weight: 600;
	}
	.uni-list {
		width: 100%;
		height:100%;
	    /* position: relative; */
		float:left;
	   /* display: flex;
	    flex-direction: column; */
		background-color: #fff;
	}
	
	.uni-list:after {
	    position: absolute;
	    z-index: 10;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    height: 1px;
	    content: '';
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	}
	
	.uni-list::before {
	    position: absolute;
	    z-index: 10;
	    right: 0;
	    top: 0;
	    left: 0;
	    height: 1px;
	    content: '';
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	}
	
	.uni-list-cell {
	    position: relative;
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between;
	    align-items: center;
	}
	
	.uni-list-cell-hover {
	    background-color: #eee;
	}
	
	.uni-list-cell::after {
	    position: absolute;
	    z-index: 3;
	    right: 0;
	    bottom: 0;
	    left: 30upx;
	    height: 1px;
	    content: '';
	    -webkit-transform: scaleY(.5);
	    transform: scaleY(.5);
	}
	
	.uni-list .uni-list-cell:last-child::after {
	    height: 0upx;
	}
	
	/* 图文列表 */
	.uni-media-list {
	    padding: 22upx 16upx;
	    box-sizing: border-box;
	    display: flex;
	    width: 100%;
	    flex-direction: row;
	}
	
	.uni-navigate-right.uni-media-list {
	    padding-right: 74upx;
	}
	
	.uni-pull-right {
	    flex-direction: row-reverse;
	}
	
	.uni-pull-right>.uni-media-list-logo {
	    margin-right: 0upx;
	    margin-left: 20upx;
	}
	
	.uni-media-list-logo image {
	    height: 100%;
	    width: 100%;
	}
	.uni-media-list-text-bottom {
	    width: 100%;
	    line-height: 30upx;
	    font-size: 26upx;
	    color: #8f8f94;
	}
	
	.uni-media-list-logo {
	    width: 180upx;
	    height: 160upx;
	    margin-right: 20upx;
		border-radius:5px;
	}
	
	.uni-media-list-body {
	    display: flex;
	    flex: 1;
	    flex-direction: column;
	    justify-content: space-between;
	    align-items: flex-start;
	    overflow: hidden;
	    height: auto;
	}
	
	.uni-media-list-text-top {
	    width: 100%;
	    line-height: 36upx;
	    font-size: 30upx;
	    height: 74upx;
	    font-size: 28upx;
	    overflow: hidden;
	}
	
	.uni-media-list-text-bottom {
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between;
	}
	.uni-media-list-text-title{
		width:100%;
		height:20px;
		font-size:1em;
		font-weight:600;
		color:#222;
	}
	.uni-media-list-text-center{
		width:100%;
		height:20px;
		float:left;
		color:#666;
		font-size:0.9em;
	}
	.text_distance{
		display:block;
		float:right;
		margin-right:3%;
	}
	.headBtn{
		width:20px;
		height:20px;
		position:absolute;
		top:40px;
		right:10px;
		background:url(../../../static/myicon.png)no-repeat;
		background-size:100% 100%;
	}
</style>